<template>
  <!-- 热搜 -->
  <view v-if="hotItems.length > 0" class="hot-keywords">
    <image class="hot-icon" src="/static/hot.png" alt="">
    <span class="hot-prefix">热搜</span>
    <span class="vertical-divider"></span>
    <span v-for="(item, index) in hotItems" :key="index" class="hot-keyword" @click="$search_handleClick(item, Object.assign({keyword: item.content}, { ...params, keyword: item.content }))">{{item.content}}</span>
  </view>
</template>
<script>
import {encodeQuery} from 'utils/helper/query'
import sdk from 'sdk'
import searchMixin from '@/mixins/search'
import { HOT_SEARCH, DEFAULT_CITY } from '@/model/enum'
export default {
  name: 'hot',

  mixins: [searchMixin],
  
  props: {
    params: { 
      type: Object, 
      default() {
          return {
            ...DEFAULT_CITY,
            keyword: ''
          }
      } 
    }
  },
  watch: {
    params:{
				handler: function(val) {
            switch(parseInt(val.regionId)){
              case 6: this.hotItems = this.HOT_SEARCH['shanghai'];break;
              case 55: this.hotItems = this.HOT_SEARCH['guangzhou'];break;
              default: this.hotItems = []
            }
				},
        deep: true,
        immediate: true
		}
  },
  data() {
    return {
      // 热搜
      HOT_SEARCH,
      hotItems: []
    }
  },
}
</script>
<style lang="less">
.hot-keywords {
  .flex;

  font-size: 28rpx;
  height: 40rpx;
  margin-bottom: 32rpx;

  .hot-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 2rpx;
  }

  .hot-prefix {
    color: @font_light_color;
  }

  .vertical-divider {
    width: 2rpx;
    background-color: @font_light_color;
    margin: 6rpx 28rpx;
  }

  .hot-keyword {
    margin-right: 32rpx;
  }
}

  
</style>